<template>
  <el-upload
      :auto-upload="false"
      :headers="headers"
      :limit="1"
      :on-change="handleChange"
      action="#"
      class="upload-demo"
  >
    <template #trigger>
      <el-button type="primary">选择文件</el-button>
    </template>
    <template #default style="margin-left: 10px">
      <el-button type="primary" @click="uploadBtn">确定上传</el-button>
    </template>
    <template #tip>
      <div class="el-upload__tip" style="color:red;">
        限制一个文件，下一个文件会覆盖上一个文件
      </div>
    </template>
  </el-upload>
</template>

<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";

let fileUpload = ref()
// 设置请求头
const headers = {
  'Content-Type': 'multipart/form-data'
}

// 选择文件时被调用，将他赋值给fileUpload
const handleChange = (file: any) => {
  fileUpload.value = file
}

// 确定上传
const uploadBtn = async () => {
  let param = new FormData()
  // 如果是多个文件数组就循环添加一下就ok了
  param.append("file", fileUpload.value.raw)
  // 发个后端
  const res = await upLoadCheckProject(param)
  if (res.code === 200) {
    ElMessage({
      message: '上传成功',
      type: 'success'
    })
  } else {
    ElMessage({
      message: '上传失败',
      type: 'error'
    })
  }
}
</script>